svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

svg circle {
  stroke: #4DD0E1;
}

.circle {
  transform-origin: center;
}

#arc1 {
  stroke-dasharray: 30;
  stroke-dashoffset: 18;
  animation: 10s -2s rota infinite linear;
}

#arc3 {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: 16s 1s rota infinite linear;
}

#arc4 {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: 6s 1s rota infinite linear reverse;
}

#arc5 {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: 4s 1s rota infinite linear;
}

#arc6 {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: 8s 1s rota infinite linear alternate;
}

#arc7 {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: 4s 1s rota infinite linear reverse;
}

text {
  fill: rgb(51, 204, 204);
  font: bold 24px sans-serif;
}

@keyframes rota {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}